<template>
  <div>
    <!-- 搜索框 -->
    <TopFilter :list="topFilterList" :cols="4" :collapse="false" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>

    <!-- 模板信息 -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :height="'auto'"
      :selectionType="'single'"
      columnsRef="wjdyXzmbMbxxTable"
      :onRowSelectChange="arr => (this.chooseTemplate = arr)"
      :onColumnsChange="columns => (this.columns = columns)"
    >
    </FilterTable>

    <div style="text-align:center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="req">确 定</el-button>
        <el-button type="primary" @click="goback">取 消</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { getQuestionnaireInfo, getQuestionnaireEditInfo } from '@/api/customerRepair/visitRules/questionnaireMake2';

export default {
  name: 'TemplateSelect',
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      topFilterList: this.createTopFilterList(), // 搜索表单列表
      fetchApi: getQuestionnaireInfo, // 获取模板表格接口
      fetchParams: { xhrAbort: true, isTemplate: 10041001, dataSources: 10451001, isValid: 10041001 }, // 获取模板表格参数
      columns: this.createTableColumns(), // 模板信息表格列
      chooseTemplate: [] // 选中的模板
    };
  },
  created() {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '模板名称',
          fieldName: 'questionnaireName',
          placeholder: '模板名称'
        },
        {
          type: 'SELECT',
          label: '模板类型',
          fieldName: 'questionnaireType',
          placeholder: '模板类型',
          itemList: this.createDictList('8003')
        },
        {
          type: 'SELECT',
          label: '数据来源',
          fieldName: 'dataSources',
          placeholder: '数据来源',
          // initialValue: 10451001,
          disabled: false,
          itemList: this.createDictList('1045')
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '模板ID',
          dataIndex: 'QUESTIONNAIRE_ID',
          filterType: 'input'
        },
        {
          title: '模板名称',
          dataIndex: 'QUESTIONNAIRE_NAME',
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '模板类型',
          dataIndex: 'QUESTIONNAIRE_TYPE',
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.QUESTIONNAIRE_TYPE, '8003')}</div>;
          }
        },
        {
          title: '是否启用',
          dataIndex: 'IS_VALID',
          sorter: true,
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.IS_VALID, '1004')}</div>;
          }
        },
        {
          title: '模板制作日期',
          dataIndex: 'QUESTIONNAIRE_DATE',
          sorter: true,
          filterType: 'input'
        },
        {
          title: '数据来源',
          dataIndex: 'DATA_SOURCES',
          sorter: true,
          filterType: 'input',
          render: props => {
            return <div>{this.createDictText(props.row.DATA_SOURCES, '1045')}</div>;
          }
        },
        {
          title: '使用次数',
          dataIndex: 'QUESTIONNAIRE_NUMBER',
          sorter: true,
          filterType: 'input'
        }
      ];
    },
    // 搜索
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false, isTemplate: 10041001, isValid: 10041001 });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 选中问题回调
    onRowSelectChange(val) {
      this.chooseTemplate = val;
    },
    // 取消
    goback() {
      this.$emit('fatherGoBack');
    },
    // 确定选择答案
    req() {
      if (this.chooseTemplate.length === 0) {
        this.$message.error('请选择一条模板');
        return;
      }
      let questionnaireId = this.chooseTemplate[0].QUESTIONNAIRE_ID;
      getQuestionnaireEditInfo(questionnaireId).then(res => {
        this.$emit('fatherReq', res.data.questionList);
      });
    }
  }
};
</script>

<style scoped>
.dialog-form {
  width: 100%;
  margin: 0;
}

.el-checkbox-group .el-checkbox + .el-checkbox {
  margin: 0;
}
</style>
